<script setup lang="ts" name="Template04">
import loginBg from '@/assets/login/template04/login-bg.svg'
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'
import { Illustrations } from '@/views/Login/components/Illustrations'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('sign-container')
</script>

<template>
  <div :class="[prefixCls, systemConfig.isLight ? 'is-light' : 'is-dark', 'relative flex items-center justify-center w-screen min-h-screen bg-[var(--el-bg-color)] overflow-hidden']">
    <div class="w-1/2 flex items-end justify-end lt-xl:hidden">
      <div class="flex flex-1 items-center justify-center bg-[var(--sign-bg-color-light)] h-screen">
        <Transition appear enter-active-class="animate__animated animate__bounceInLeft">
          <Illustrations />
        </Transition>
      </div>
      <component :is="loginBg" :class="[`${prefixCls}-svg`, 'w-auto h-screen']" />
    </div>
    <div class="w-1/2 flex items-center justify-center lt-xl:w-full">
      <Transition appear enter-active-class="animate__animated animate__bounceInRight">
        <div class="w-full sm:max-w-500px">
          <slot />
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped lang="scss">
.#{$namespace}-sign-container{
  &.is-light {
    --sign-bg-color: var(--el-color-primary-light-7);
    --sign-bg-color-light: var(--el-color-primary-light-9);
  }

  &.is-dark {
    --sign-bg-color: var(--el-fill-color-dark);
    --sign-bg-color-light: var(--el-fill-color-light);
  }

  :deep(.layout-footer-waves) {
    .dark {
      fill: var(--sign-bg-color);
    }

    .light {
      fill: var(--sign-bg-color-light);
    }

  }
}
</style>
